<!--
 * @Author: wangming
 * @Date: 2021-07-23 16:25:15
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-28 14:46:14
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hmButtonStyle.vue
 * @Description: 
-->
<template>
  <div>
    <el-form-item label="禁用" class="tr">
      <el-switch v-model="value.__config.disabled"> </el-switch>
    </el-form-item>
    <el-form-item label="按钮样式">
      <el-select
        v-model="value.__config.type"
        placeholder="默认"
        style="width: 100%"
      >
        <el-option value="" label="默认"></el-option>
        <el-option value="primary" label="主要(primary)"></el-option>
        <el-option value="success" label="成功(success)"></el-option>
        <el-option value="info" label="信息(info)"></el-option>
        <el-option value="warning" label="警告(warning)"></el-option>
        <el-option value="danger" label="危险(danger)"></el-option>
        <el-option value="text" label="文字(text)"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="按钮图标">
      <template v-if="!!value.__config.icon">
        <i
          class="menu-icon mr5 f16"
          :class="value.__config.icon"
          @click="handleIconSelect"
        ></i>
        <el-button type="text" @click="value.__config.icon = ''"
          >清空</el-button
        >
      </template>
      <el-button type="text" @click="handleIconSelect" v-else
        >选择icon</el-button
      >
    </el-form-item>
    <el-form-item label="是否朴素按钮" class="tr">
      <el-switch v-model="value.__config.plain" />
    </el-form-item>
    <el-form-item label="是否圆角按钮" class="tr">
      <el-switch v-model="value.__config.round" />
    </el-form-item>
    <el-form-item label="是否圆形按钮" class="tr">
      <el-switch v-model="value.__config.circle" />
    </el-form-item>
  </div>
</template>

<script>
import IconSelect from "@/components/IconSelect";
import basicmixins from "./basicmixins";
export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    handleIconSelect() {
      IconSelect.select(this.value.__config.icon).then((icon) => {
        this.$set(this.value.__config, "icon", icon);
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>
